<extend name="Common/common"/>

<block name='content'>
<link rel="stylesheet" href='__PUBLIC_ADMIN__css/caiDan.css'/>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 微信管理 <span class="c-gray en">&gt;</span> 菜单管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

<div class="col-lg-6 col-md-6 col-sm-6">
	<div class="phone">
		<div class="phont_foot">
			<div class="caidan" id="caidan">
				<volist name="caidan" id="v">
					<div class='caidan_btn'>
						<button class='btn btn-default' onclick='caidan_btn_click(this,0,"{:U("CaiDan/caidanEdit",array("id"=>$v["id"]))}")'>{$v['name']}</button>
						
						<div class='sub hidden'>
							<i class='Hui-iconfont'>&#xe6d5;</i>
							<volist name="v.sub" id="c">
								<div class='sub_btn'>
									<button class='btn btn-default' onclick='caidan_btn_click(this,1,"{:U("CaiDan/caidanEdit",array("id"=>$c["id"]))}")'>{$c['name']}</button>
								</div>
							</volist>
							<if condition="count($v['sub'] lt 5)">
							<div class='sub_add btn btn-default' onclick='add_sub(this,{$v['id']})'>+</div>
							</if>
						</div>
					</div>
				</volist>
				<if condition='count($caidan) lt 3'>
				<div onclick="add_caidan(this)" class='caidan_add'>
					<span class="btn btn-default">+</span>
				</div>
				</if>
			</div>
		</div>
	</div>
</div>
<iframe class="content col-lg-5 col-md-5 col-sm-5" src="{:U('CaiDan/caidanEdit')}" id="content"></iframe>

<button class="btn tongbu btn-primary radius" onclick="tongbu()">同步数据到微信</button>
<script>
	// 同步数据
	function tongbu(){
		var index = layer.load(2,{shade:[0.1,'#333']});
		$.get('{:U("tongbu")}',function(res){
			layer.close(index);
			if(res == 1){
				layer.msg('同步成功',{icon:6,time:1000});
			}else{
				layer.msg('同步失败，请稍后重试',{icon:5,time:1000});
			}
		});
	}
	$(function(){
		var count = $('#caidan>div').length;
		var width = parseInt($('#caidan').css('width'))/count;
		$('#caidan>div').each(function (){
			$(this).css('width',width+'px');
		});
		
		$('.sub').each(function (){
			var top = parseInt($(this).css('top'));
			var count = $(this).find('.sub_btn').length;
			top = top - count * 50;
			$(this).css('top',top + 'px');
		});
	})
	// 添加一级菜单
	function add_caidan(obj){
		$.post('{:U("CaiDan/addCaiDan")}',{},function(data){
			if(data.status == 1){
				var count = $('#caidan>div').length;
				var width = parseInt($('#caidan').css('width'));
				var url = data.url;
				var pid = data.pid;
				
				if(count == 1){
					width = width/2;
					addEle(obj,url,pid,width);
				
				}else if(count == 2){
					width = width/3;
					addEle(obj,url,pid,width);
				}else{
					width = width/3;
					addEle(obj,url,pid,width);
					$(obj).hide();
				}
			}else{
				layer.msg('添加菜单失败，请稍后重试',{icon:5,time:1000});
			}
		});
		
	}
	
	function addEle(obj,url,pid,width){
		$("<div class='caidan_btn col-sm-0'><button class='btn btn-default' onclick='caidan_btn_click(this,0,\""+url+"\")'>菜单名称</button><div class='sub hidden'><i class='Hui-iconfont'>&#xe6d5;</i><div class='sub_add btn btn-default' onclick='add_sub(this,"+pid+")'>+</div></div></div>").insertBefore($(obj));
		$('#caidan>div').each(function (){
			$(this).css('width',width+'px');
		});	
	}
	
	// 菜单点击事件
	function caidan_btn_click(obj,type,url){
		$('#caidan').find('.sub').each(function(){
			$(this).addClass('hidden');
		});
		$('#caidan').find('.on').removeClass('on');
		
		if(type == 0){
			$(obj).next().removeClass('hidden');
		}
		$(obj).parents('.sub').removeClass('hidden');
		$(obj).addClass('on');
		
		$('#content').attr('src',url+"?"+Math.random());
	}
	
	// 添加二级菜单
	function add_sub(obj,pid){
		$.post('{:U("CaiDan/addCaiDan")}',{pid:pid},function(data){
			if(data.status == 1){
				var count = $(obj).parents('.sub').find('.sub_btn').length;
				
				$("<div class='sub_btn'><button class='btn btn-default' onclick='caidan_btn_click(this,1,\""+data.url+"\")'>子菜单</button></div>").insertBefore($(obj));
				var top = parseInt($(obj).parents('.sub').css('top'));
				if(count < 4){
					top = top - 50 + 'px';
					$(obj).parents('.sub').css('top',top);
				}else{
					$(obj).hide();
				}
				
				$(obj).prev('.sub_btn').find('button').click();
			}else{
				layer.msg('添加菜单失败，请稍后重试',{icon:5,time:1000});
			}
		});
	}
</script>

</block>